<template>
  <div class="app-container">
    <el-row :gutter="20">
      <img-mark :style="'height:'+height+'px;'" :canvas-image="fileRecord.convertFile1" v-if="imgMarkShow" @closeCanvas="resetFileRecord"></img-mark>
    </el-row>
  </div>
</template>

<script>
import { getRecord } from '@/api/test/fileRecord'
import { getQueryString } from '@/utils/ruoyi'
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
import ImgMark from '@/components/ImgMark/ImgMark'

export default {
  name: 'fileEdit',
  components: { draggable, Sortable, ImgMark },
  data() {
    return {
      height: 600,
      baseURL: process.env.VUE_APP_BASE_API,
      routerParams: {},
      fileRecord: {},
      imgMarkShow: false
    }
  },
  created() {
    this.getRouterParams()
  },
  mounted() {
    this.calScreenArea()
  },
  methods: {
    /** 计算屏幕区域操作 */
    calScreenArea: function() {
      let area = document.getElementsByClassName('app-main')
      let clientHeight = area[0].clientHeight
      this.height = clientHeight - 100
    },
    /** 获取文件记录操作 */
    getFileRecord(row) {
      let id
      if (row !== undefined) {
        id = row.id
      } else {
        id = getQueryString('fileId')
      }
      // 这个id为null是因为重新刷新该页面后，进行返回上一页的操作出现的。第一，路由内没有数据，第二，地址栏也没有指导点编号，所以为null了
      if (id === null) return
      getRecord(id).then(response => {
        this.fileRecord = response.data
        this.imgMarkShow = true
      })
    },
    /** 清空文件记录操作 */
    resetFileRecord() {
      this.fileRecord = {}
      this.imgMarkShow = false
    },
    /** 获取路由参数 */
    getRouterParams() {
      this.routerParams = this.$store.state.user.fileRecord
      this.getFileRecord(this.routerParams)
    }
  },
  watch: {
    $route() {
      this.getRouterParams()
    }
  }
}
</script>

<style>
#detailCard >>> .el-card-define {
  min-height: 100%;
  height: 100%;
}

#detailCard >>> .el-card-define >>> .el-card__body {
  height: 100%;
}
</style>
